<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- <p class="p" ref="abc">123123</p> -->
    <div id="app">
        <p class="p" ref="p">{{count}}</p>
        <p><button @click="count++">count++</button></p>
    </div>
</body>
<script>
    // 在Vue中,有时也需要获取元素/组件(vue),  原生方法 => 基本上都是通过文档获取元素(范围可能不准确), Vue中就定义自己查找元素的方法(基于 ref属性) => 可以理解为在Vue实例初始化渲染过程中,将包含ref属性的元素提取出来 对应ref名放到Vue实例$refs对象中 (优点,只在对应Vue实例范围内查找)
    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
        },
        watch: {
            // 数据改变之后 回调函数立即执行  => 数据变了 视图没变(元素中的内容还是原本的)
            // count:async function (newVal, oldVal) {
            //     console.log("监听count发生改变", newVal, oldVal);
            //     console.log(this.$refs.p.textContent);
            // }

            // Vue3   想在侦听器回调中能访问被 Vue 更新之后的 DOM
            count:{
                handler: function (newVal, oldVal) {
                    console.log("监听count发生改变", newVal, oldVal);
                    console.log(this.$refs.p.textContent);
                },
                flush:"post",
            }
        },
        mounted() {
            console.log("vue实例", this);
            console.log("vue.$refs", this.$refs);
            console.log("p", this.$refs.p);
        },
    })


</script>

</html>